import React, { useEffect } from 'react'
import Header from '../../components/Header'
import Content from '../../components/Content'
import Footer from '../../components/Footer'
import { nanoid } from 'nanoid'
import store, { asyncSubTodoAction, changeTextAction, asyncGetListAction } from '../../redux/store'
import "./index.css";

export default function Index() {
    // 监听键盘事件
    useEffect(() => {
        document.onkeydown = async e => {
            if (e.key === "Enter") {
                // 提交数据
                let subData = {
                    id: nanoid(),
                    done: false,
                    val: store.getState().val
                }
                console.log("提交输入的数据", subData);
                let { data: { status } } = await store.dispatch(asyncSubTodoAction(subData));
                if (status === 1) {
                    console.log("添加成功")
                    // 获取详细todo列表信息 ？异步的dispacth
                    store.dispatch(asyncGetListAction());
                } else {
                    console.log("添加失败");
                }
                store.dispatch(changeTextAction(""));


            }
        }

        // 获取todo的列表

        store.dispatch(asyncGetListAction());




    }, [])

    return (
        <div className='container'>
            <Header />
            <ul className='myul'>
                {store.getState().list.map(item => <Content {...item} key={item.id} />)}


            </ul>
            <Footer />
        </div>
    )
}
